<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="apple-touch-icon" type="image/png" href="elogo.png">
  <link rel="icon" type="image/png" href="elogo.png">
  <link rel="stylesheet" title="base" href="style.css?%VERSION%" type="text/css">
  <title>ёRadio - Player</title>
  <style> </style>
  </head>
<body class="modeweb">
  <div class="content">
    <div class="logo"></div>
    <div id="navbar">
      <div class="playerbytton navbutton" id="playlistbutton" data-name="playlist"></div>
      <div class="playerbytton navbutton" id="sdbutton" data-name="sdcard"></div>
      <div class="playerbytton navbutton" id="settingsbutton" data-name="settings"></div>
    </div>
    <div class="playerwrap">
      <div class="player">
        <div id="nameset">&nbsp;</div>
        <div id="meta">&nbsp;</div>
        <div class="playerbyttonwrap">
          <div class="playerbytton" id="prevbutton" data-name="prev"></div>
          <div class="playerbytton stopped" id="playbutton" data-name="play"></div>
          <div class="playerbytton" id="nextbutton" data-name="next"></div>
          <div class="playerbytton" id="volmbutton" data-name="volm"></div>
          <div class="playerbytton" id="volpbutton" data-name="volp"></div>
          <div class="playerbytton" id="eqalbutton" data-name="equalizer"></div>
        </div>
        <div id="equalizerwrap">
		      <div id="equalizerbg" class="hidden">
				    <ul id="equalizer">
						  <li>
						  <li>
								balance<span class="eqinfo" id="eqbalinfo">0</span>
								<input type="range" id="eqbal" class="slider" data-slaveid="eqbalinfo" name="balance" min="-16" max="16" value="0">
							</li>
						  <li>
						  <li>
								treble<span class="eqinfo" id="eqtrebleinfo">0</span>
								<input type="range" id="eqtreble" class="slider" data-slaveid="eqtrebleinfo" name="treble" min="-16" max="16" value="0">
							</li>
						  <li>
								middle<span class="eqinfo" id="eqmiddleinfo">0</span>
								<input type="range" id="eqmiddle" class="slider" data-slaveid="eqmiddleinfo" name="middle" min="-16" max="16" value="0">
						  </li>
						  <li>
								bass<span class="eqinfo" id="eqbassinfo">0</span>
								<input type="range" id="eqbass" class="slider" data-slaveid="eqbassinfo" name="bass" min="-16" max="16" value="0">
						  </li>
						  <li class="formbuttons">
						  	<div class="button" id="accept_button" data-name="equalizer">Acceptable...</div>
						  </li>
				    </ul>
		      </div>
		      <div id="volnav">
		        <div id="modeline"><span id="modeweb" class="modeitem" data-name="web">Web</span><span id="modesd" data-name="sd" class="modeitem">SD</span></div>
		        <input type="range" id="volrange" class="slider" name="volume" data-slaveid="volinfo" min="0" max="254" value="0">
		      </div>
		      <div id="sdnav" class="hidden">
		        <div id="sdposvals">
		          <div id="sdposvalscurrent">0:00</div>
	            <div id="snuffle" class="playerbytton active" data-name="snuffle"><span></span></div>
		          <div id="sdposvalsend">0:00</div>
		        </div>
		        <input type="range" id="sdpos" class="slider" name="sdpos" min="0" max="100" value="0">
		      </div>
		      <div class="infowrap">
		        <div class="infoitem">volume: <span id="volinfo">0</span></div>
		        <div class="infoitem" id="bitinfo">bitrate: 0kBit</div>
		        <div class="infoitem" id="rsiinfo">rssi: 0dBm</div>
		      </div>
		      <ul id="playlist">
		      </ul>
        </div><!--equalizerwrap-->
      </div><!--player-->
      <div id="pleditorwrap" class="hidden">
        <div id="pleditor">
          <h2>Playlist Editor<span onclick="showEditor()"></span></h2>
          <div id="pleheader"><span class="space"><input type="checkbox" onclick="selectAll(this)" /></span><span class="plename">Name</span><span class="pleurl">URL</span><span class="pleovol">Ovol</span></div>
          <ol id="pleditorcontent">
            <li class="pleitem">
              <span>1.</span>
              <input class="pleinput plename" type="text" value="" maxlength="140" />
              <input class="pleinput pleurl" type="text" value="" maxlength="140" />
              <input class="pleinput pleovol" type="number" min="-30" max="30" step="1" value="0" />
            </li>
          </ol><!--pleditorcontent-->
          <div class="formbuttons">
            <label for="file-upload" class="button" data-name="plimport">Import</label><input id="file-upload" type="file" accept=".txt, .csv" onchange="doPlUpload(this)" hidden/>
            <div class="button" data-name="plexport">Export</div>
            <div class="button" data-name="pladd">Add</div>
            <div class="button" data-name="pldel">Remove</div>
            <div class="button" data-name="plsubmit">Save</div>
          </div>
        </div><!--pleditor-->
      </div><!--pleditorwrap-->
    </div><!--playerwrap-->
    <div id="copy">powered by <a target="_blank" href="https://github.com/e2002/yoradio/">ёRadio</a> | v%VERSION%</div>
  </div>
  <script src="script.js?%VERSION%"></script>
  <script src="dragpl.js?%VERSION%"></script>
</body>
</html>
